<template>
  <div class="circle-progress">
    <div class="progress" :class="processClass">
      <div v-for="item in 4" :key="item" class="block" :class="`block${item}`">
        <div
          v-if="rate < 0.25 * item"
          class="modal"
          :class="`modal${item}`"
          :style="{transform: getProgress(item)}"
        ></div>
      </div>
    </div>
    <div class="content">
      <div class="content-bg1">
        <div class="content-bg2"></div>
      </div>
    </div>
    <div class="img_bg"></div>
    <div class="trans"></div>
    <div class="pointer" ref="pointer">
      <img src="icons02/@2x/pointer.jpg" alt="" >
    </div>
  </div>
</template>

<script>
  export default {
    name: "circle-progress",
    props: {
      rate: {
        default: 1 * 0.75
      },
    },
    data: ()=>{
      return {
        processClass: ''
      }
    },
    methods: {
      getProgress(index) {
        const { rate } = this;
        if (index === 1) {
          return `rotate(${(rate / 0.25) * 90}deg)`;
        }
        if (index === 2) {
          if (rate > 0.25 && rate < 0.5) {
            return `rotate(${((rate - 0.25) / 0.25) * 90}deg)`;
          }
        }
        if (index === 3) {
          if (rate > 0.5 && rate < 0.75) {
            return `rotate(${((rate - 0.5) / 0.25) * 90}deg)`;
          }
        }
        if (index === 4) {
          if (rate > 0.75) {
            return `rotate(${((rate - 0.75) / 0.25) * 90}deg)`;
          }
        }
      },
      action() {
        if (this.rate <= 0.25) {
          this.processClass = 'danger'
        } else if (this.rate <= 0.37) {
          this.processClass = 'nomal'
        } else if (this.rate <= 0.5) {
          this.processClass = 'good'
        } else if (this.rate >0.5) {
          this.processClass = 'verygood'
        }
        this.$refs.pointer.style.transform = `rotate(${-135 + this.rate * 360}deg)`
      }
    },
    mounted() {
      this.action()
    },
    watch : {
      rate() {
        this.action()
      }
    }
  };
</script>

<style scoped lang="scss">
  .circle-progress {
    margin-top: 33px;
    position: relative;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    background-color: #091f2d;
    border-radius: 100%;
    overflow: hidden;
    .pointer{
      width: 30px;
      height: 40px;
      position: absolute;
      left: 60px;
      top: 35px;
      z-index: 110;
      transform-origin: 15px bottom;
      transform: rotate(-135deg);
      img{
        width: 30px;
        height: 40px;
      }
    }
    .trans{
      width: 75px;
      height: 75px;
      position: absolute;
      left: 75px;
      top: 75px;
      transform: rotate(45deg);
      background-color: #091f2d;
      z-index: 100;
      transform-origin: 0 0;
    }
    .img_bg{
      width: 150px;
      height: 128px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      background:url('/icons02/@2x/clock3.png')
    }
    .progress,
    .content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform: rotate(225deg);
    }
    .progress {
      .block {
        position: absolute;
        width: 50%;
        height: 50%;
        background-color: #64d3f6;
        &1 {
          left: 50%;
          top: 0;
        }
        &2 {
          left: 50%;
          top: 50%;
        }
        &3 {
          left: 0;
          top: 50%;
        }
        &4 {
          left: 0;
          top: 0;
        }
        .modal {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: #233241;
          // transform: rotate(-90deg);
          &1 {
            transform-origin: 0 100%;
          }
          &2 {
            transform-origin: 0 0;
          }
          &3 {
            transform-origin: 100% 0;
          }
          &4 {
            transform-origin: 100% 100%;
          }
        }
      }
    }
    .danger.progress{
      .block{
        background-color: #761b1f;
      }
    }
    .nomal.progress{
      .block{
        background-color: #cb4209;
      }
    }
    .good.progress{
      .block{
        background-color: #feb909;
      }
    }
    .verygood.progress{
      .block{
        background-color: #20af4f;
      }
    }
    .content {
      .content-bg1, .content-bg2 {
        position: absolute;
        left: 6%;
        top: 6%;
        width: calc(100% - 12%);
        height: calc(100% - 12%);
        background-color: #091f2d;
        border-radius: 100%;
      }
      .content-bg2 {
        background-color: #091f2d;
      }
    }
  }
</style>

